<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
    <head th:replace="lib :: common_header"></head>
    <body>
        <div th:replace="lib :: header_box"></div>
        <div th:replace="lib :: menu_box (21)"></div>

        <div class="main-box">
            <div class="main-container">
                <!-- 面包屑导航 -->
                <div class="row main-container-header">
                    <div class="col-md-12 rel">
                        <div class="main-container-header-line fix">
                            <div class="row">
                                <div class="col-xs-6 col-md-6"> <h4 class="g4"> <a class="a-back" href="javascript:history.go(-1)"><em class="el-icon-arrow-left"></em>
                                    <em th:text="${title}"></em>
                                </a></h4></div>
                                <div class="col-xs-6 col-md-6 tr f12">
                                    <div class="bread-link-box">
                                        当前位置：<a th:href="@{/console/organization}">会员管理</a>
                                        &nbsp;&gt;&nbsp;
                                        <em th:text="${title}"></em>
                                    </div><!-- /bread-link-box -->
                                </div>
                            </div><!-- /row -->
                        </div><!-- main-container-header-line -->
                    </div>
                </div><!-- /main-container-header -->

                <div class="f14" id="app" v-cloak>
                    <br>
                    <div class="row">
                        <div class="col-sm-12">
                            <el-card class="box-card" shadow="hover">
                                <div slot="header" class="clearfix">
                                    <span>会员：{{ orgForm.name }}</span>
                                    <img style="float: right;" th:src="@{/images/haha-icon.jpg}" width="30">
                                </div>
                                <div class="text item pb10">
                                    会员类型：医疗会员 <el-divider direction="vertical"></el-divider> 会员注册时间：{{ orgForm.created }}
                                </div>
                                <div class="text item pb10">
                                    邮箱：{{ orgForm.email }} <el-divider direction="vertical"></el-divider> 电话：<i class="el-icon-phone"></i>{{ orgForm.contact_phone }} <i class="el-icon-mobile"></i>{{ orgForm.contact_mobile }}
                                </div>
                                <div class="text item pb10">
                                    联系人：{{ orgForm.contact }} <el-divider direction="vertical"></el-divider> 地址：{{ orgForm.address }}
                                </div>
                            </el-card>
                        </div><!-- /col -->
                    </div><!-- /row -->

                    <br>

                    <!-- 用户列表 -->
                    <div class="row">
                        <div class="col-sm-12">
                            <el-card class="box-card" shadow="hover">
                                <div class="fix">
                                    <div class="l mt10">所属用户</div>
                                    <div class="r">
                                        <el-button type="primary" @click="openBox">添加用户</el-button>
                                    </div>
                                </div>
                                <br>
                                <template v-if="users.length == 0">
                                    <div class="tc" style="color:#c5c3c3;">
                                        暂无数据
                                    </div>
                                </template>
                                <table class="table" style="border:0; border-top:1px solid #EEE;">
                                    <tr v-for="(user, index) in users" style="border-bottom:1px solid #EEE;">
                                        <td class="pt10 pb10 pl10 pr10"><i class="el-icon-s-custom"></i> {{ user.username }}</td>
                                        <td class="pt10 pb10 pl10 pr10">姓名：{{ user.name }}</td>
                                        <td class="pt10 pb10 pl10 pr10">邮箱：{{ user.email }}</td>
                                        <td class="pt10 pb10 pl10 pr10" width="100">
                                            <el-button plain size="mini" @click="unbind(user)">解绑用户</el-button>
                                        </td>
                                    </tr>
                                </table>
                                <!--
                                <div class="tr mt10">
                                    <el-pagination
                                            :page-sizes="[10, 20, 50, 100]"
                                            :page-size="100"
                                            layout="sizes, prev, pager, next"
                                            :total="20">
                                    </el-pagination>
                                </div> -->
                            </el-card>
                        </div><!-- /col -->
                    </div><!-- /row -->

                    <el-dialog title="用户列表"
                               :visible.sync="dialogVisible"
                                width="540px">
                        <div class="zu">
                            <div class="mb20">
                                <el-autocomplete v-model="userD"
                                    prefix-icon="el-icon-search"
                                    placeholder="请输入用户名或姓名"
                                    :clearable="true"
                                    :fetch-suggestions="querySearch"
                                    value-key="name"
                                    style="width:84%">
                                </el-autocomplete>
                                <el-button @click="querySelect">查询</el-button>
                            </div>
                            <el-card shadow="never">
                                <div class="pt10 pb10 fix">
                                    <el-button type="primary"
                                            @click="bind()">
                                        添加用户
                                    </el-button>
                                </div>
                                <el-table :data="usersD"
                                          @selection-change="selectionChange">
                                    <el-table-column
                                            type="selection"
                                            width="40">
                                    </el-table-column>
                                    <el-table-column prop="username" label="用户名"></el-table-column>
                                    <el-table-column prop="name" label="姓名"></el-table-column>
                                </el-table>

                                <div class="tr mt10">
                                    <el-pagination
                                            :page-size="5"
                                            :current-page="pageNo"
                                            :total="usersDB.length"
                                            layout="prev, pager, next"
                                            @current-change="pageChange">
                                    </el-pagination>
                                </div><!-- /分页 -->

                            </el-card>

                        </div><!-- /zu -->
                    </el-dialog>


                </div><!-- /app -->
            </div>
        </div>
        <div th:replace="lib :: javascript_box"></div>
        <script> var id = '[[${id}]]'; </script>
        <script th:src="@{/lib/console/organization_manage_user.js}"></script>
    </body>
</html>

